Creo este juego con React. Quiero terminar el juego después de que el primer jugador gane un juego XO en React. En otras palabras: después de que el primer jugador gana, el siguiente jugador no puede continuar el juego y el juego termina. este es mi código:
function App() { const [state,setstate]=useState({ player: "CIRCLE", positions: [ 'EMPTY', 'EMPTY','EMPTY', 'EMPTY', 'EMPTY','EMPTY', 'EMPTY', 'EMPTY','EMPTY', ] }) // mark X or O function takeTurn(position) { const positions=[...state.positions]; positions[position] = state.player; setstate({ player:state.player === 'CIRCLE' ? 'CROSS' : 'CIRCLE', positions, }) } return( <div > <div className="player"> Player : [{state.player}] </div> <div className="total"> <Square position={0} value={state.positions[0]} takeTurn={takeTurn} /> <Square position={1} value={state.positions[1]} takeTurn={takeTurn} /> <Square position={2} value={state.positions[2]} takeTurn={takeTurn} /> <Square position={3} value={state.positions[3]} takeTurn={takeTurn} /> <Square position={4} value={state.positions[4]} takeTurn={takeTurn} /> <Square position={5} value={state.positions[5]} takeTurn={takeTurn} /> <Square position={6} value={state.positions[6]} takeTurn={takeTurn} /> <Square position={7} value={state.positions[7]} takeTurn={takeTurn} /> <Square position={8} value={state.positions[8]} takeTurn={takeTurn} /> </div> <div className="caption"> Winner = {winner && <Result winner={winner} />} </div> <div className="reset"><button onClick={reset} >Reset</button></div> </div> ) } export default App;Así que parece que necesitas algunas cosas.
winner Puede agregar el winner a su estado y cambiar la línea de cálculo del ganador a:
Winner = {state.winner && <Result winner={state.winner} />}Para calcular el ganador, la aplicación necesita conocer las líneas ganadoras y verificar si el mismo símbolo está en los 3:
function calculateWinner(positions) { const lines = [ [0, 1, 2], [3, 4, 5], [6, 7, 8], [0, 3, 6], [1, 4, 7], [2, 5, 8], [0, 4, 8], [2, 4, 6] ]; for (let i = 0; i < lines.length; i++) { const [a, b, c] = lines[i]; if (positions[a] && positions[a] === positions[b] && positions[a] === positions[c]) { return positions[a]; } } return null; } Luego puede usar esto en su función takeTurn para return temprano si ya hay un ganador y, por lo tanto, no actualizar el tablero, y también para volver a calcular si hay un ganador cada vez:
function takeTurn(position) { const positions = [...state.positions]; if (!state.winners) return; positions[position] = state.player; setstate({ player: state.player === 'CIRCLE' ? 'CROSS' : 'CIRCLE', positions, winner: calculateWinner(positions) }); } Con los componentes funcionales, también es una buena práctica no tener un solo objeto de state , sino tener uno para cada propiedad que normalmente tendría. Esto hace que sea más fácil configurar y administrar cada uno correctamente, por lo que puede considerar cambiar su código de estado a:
const [player, setPlayer] = useState('CIRCLE'); const [positions, setPositions = useState([ 'EMPTY', 'EMPTY','EMPTY', 'EMPTY', 'EMPTY','EMPTY', 'EMPTY', 'EMPTY','EMPTY', ]); const [winner, setWinner] = useState(null);y actualice el código de establecimiento en consecuencia.